<template>
  <router-view></router-view>
  <p>
    app.vue,storeTest.count{{ storeTest.count }} 
    app.vue,解构出来的count{{ count }}
    <el-button @click="countAdd()">count+</el-button> 
    <el-button @click="countAddPatch()">$patch来count+</el-button>
    <el-button @click="countAddaction()">action来count+</el-button>
    <el-button @click="countToRef()">解构state来count++</el-button>
    <el-button @click="countRest()">重置count</el-button>
  </p>

  <p>
    <el-button type="primary" @click="goTo('/index')">首页</el-button>
    <el-button type="primary" @click="goTo('/todo')">todo</el-button>
    <el-button type="primary">组件</el-button>
  </p>
  
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { storeCount } from '@/store/count.ts';
import { storeToRefs } from 'pinia'; // pina提供的用来解决解构导致的双向数据绑定失效问题
let storeTest = storeCount();


//let { count } = storeTest; count会失去双向数据绑定
let { count } = storeToRefs(storeTest);

const router = useRouter();
const goTo = (path: string) => {
  router.push(path);
};

// 直接修改state
const countAdd = () =>{
  storeTest.count ++
}

// 通过$patch修改state
const countAddPatch = () =>{ 
  // $patch可以同时修改多个state
  storeTest.$patch({
    count: ++storeTest.count
  })
}

// 通过action修改state
const countAddaction = () =>{
  storeTest.countAdd(++storeTest.count)
}


// 解决结构修改市区双向数据绑定问题
const countToRef = () =>{
  storeTest.$patch({
    count: ++storeTest.count
  })
}

const countRest = () => {
  storeTest.$reset()
}
</script>
